<template>
  <div :id="id" class="svgaplayerweb"></div>
</template>

<script>

import SVGA from 'svgaplayerweb'

export default {
  name: '',
  props: {
    src: {},
    id:{}
  },
  created() {
  },
  mounted() {
    this.loadSvga()
  },
  data() {
    return {}
  },
  methods: {
    loadSvga() {
      var parser = new SVGA.Parser(`#${this.id}`)
      var player = new SVGA.Player(`#${this.id}`)
      parser.load(this.src, function (videoItem) {
        player.setContentMode('AspectFit')
        player.setVideoItem(videoItem)
        player.startAnimation()
      }, function (error) {
        alert(error.message)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.svgaplayerweb {
  height: 100%;
  width: 100%;
}
</style>
